<template>
  <div class="page-room">
    <trtc-room id="trtcroom" :config="trtcConfig"></trtc-room>
  </div>
</template>

<script>
import { genTestUserSig } from '../../debug/GenerateTestUserSig.js' // 本地生成userSig
export default {
  data () {
    return {
      trtcConfig:{
        sdkAppID: '', // 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
        userID: '', // 必要参数 用户 ID 可以由您的帐号系统指定
        userSig: '', // 必要参数 身份签名，相当于登录密码的作用
        template: 'grid', // 必要参数 组件模版，支持的值 1v1 grid custom ，注意：不支持动态修改, iOS 不支持 pusher 动态渲染
      }
    }
  },
  components: {
  },
  watch:{
  },
  methods: {
    test () {
      let trtcRoomContext = this.$mp.page.selectComponent('#trtcroom')
      let EVENT = trtcRoomContext.EVENT

      if(trtcRoomContext) {
        trtcRoomContext.on(EVENT.LOCAL_JOIN, (event)=>{
            console.log('有人加入了')
            // 进房成功后发布本地音频流和视频流
            trtcRoomContext.publishLocalVideo()
            trtcRoomContext.publishLocalAudio()
        })
        // 监听远端用户的视频流的变更事件
        trtcRoomContext.on(EVENT.REMOTE_VIDEO_ADD, (event)=>{
            // 订阅（即播放）远端用户的视频流
            let userID = event.data.userID
            let streamType = event.data.streamType// 'main' or 'aux'
            trtcRoomContext.subscribeRemoteVideo({userID: userID, streamType: streamType})
        })

        // 监听远端用户的音频流的变更事件
        trtcRoomContext.on(EVENT.REMOTE_AUDIO_ADD, (event)=>{
            // 订阅（即播放）远端用户的音频流
            let userID = event.data.userID
            trtcRoomContext.subscribeRemoteAudio({userID: userID})
        })

        // 进入房间
        trtcRoomContext.enterRoom({roomID: 1002}).then(()=>{

        }).catch((res)=>{
            console.error('room joinRoom 进房失败:', res)
        })
      }
    }
  },
  onLoad (options) {
    let Signature = genTestUserSig(options.userID) // 生成对应的userSig
    this.trtcConfig = {
      sdkAppID: Signature.sdkAppID, // 开通实时音视频服务创建应用后分配的 SDKAppID(用的自己帐号测试)
      userID: options.userID, // 用户 ID，可以由您的帐号系统指定
      userSig: Signature.userSig, // 身份签名，相当于登录密码的作用
      template: 'grid' // 画面排版模式
    }
  },
  onReady () {
    //解决不能调用原生this.setData(object, callback)的等视图更新后调用callback的功能,参照https://cloud.tencent.com/document/product/647/32183
    this.$nextTick(()=>{
      this.test()
    })
  }
}
</script>

<style scoped>
.page-room{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
</style>
